<template>
<!--    该组件已经废弃 6.17 by manyuan-->
    <div v-if="splitStyle === 1" class="rn-splite-style">
        <div class="split-wrapper">
            <div class="row no-gutters radius-10 align-items-center">
                <div class="col-lg-12 col-xl-6 col-12">
                    <div class="thumbnail image-left-content">
                        <img :src="require(`@/assets/images/split/${splitData.image}`)" alt="Split Image"/>
                    </div>
                </div>
                <div class="col-lg-12 col-xl-6 col-12">
                    <div class="split-inner">
                        <h4 class="title">{{ splitData.title }}</h4>
                        <p class="description">{{ splitData.description }}</p>
                        <ul class="split-list">
                            <li v-for="listItem in splitData.list">{{ listItem }}</li>
                        </ul>
                        <div class="view-more-button mt--35">
                            <Button :title="splitData.btn.text" :url="splitData.btn.link"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div v-else-if="splitStyle === 2 || splitStyle === 3 || splitStyle === 4"
         :class="[`rn-splite-style`, {'bg-color-blackest': splitStyle === 3 || splitStyle === 4}]">
        <div class="split-wrapper">
            <div class="row no-gutters radius-10 align-items-center">
                <div :class="[`col-lg-12 col-xl-6 col-12`, {'order-2': splitStyle === 4}]">
                    <div class="thumbnail">
                        <img :src="resImage" alt="Split Image"/>
                    </div>
                </div>
                <div :class="[`col-lg-12 col-xl-6 col-12`, {'order-1': splitStyle === 4}]">
                    <div class="split-inner">
                        <h4 class="title">{{ splitData.title }}</h4>
                        <p class="description">{{ splitData.description }}</p>
<!--                        <PhotoUploader-->
<!--                        :num-of-upload="numOfUpload"-->
<!--                        @doSubmit="changeImg"/>-->
                        <el-upload
                                action="https://jsonplaceholder.typicode.com/posts/"
                                list-type="picture-card"
                                :on-preview="handlePictureCardPreview"
                                :on-remove="handleRemove">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                        <div style="display: flex;flex-direction: row;margin-top: 50px;">
                            <button
                                    class="btn-default"
                                    @click="runDemo">示例图片
                            </button>
                            <button
                                    class="btn-default"
                                    @click="showResult"
                                    style="margin-left: 30px;">查看结果
                            </button>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Button from '../button/Button'
    import Counter from '../counterUp/Counter'
    import PhotoUploader from "../../function/PhotoUploader";
    export default {
        name: 'Split',
        components: {PhotoUploader, Counter, Button},
        data(){
            return{
                resImage:'',
                dialogImageUrl: '',
                dialogVisible: false
            }
        },
        props: {
            splitStyle: {
                type: Number,
                default: 1
            },
            // 可以上传的最大文件数量
            numOfUpload: {
                type: Number,
                default: 5
            },
            splitData: {},
            //请求的接口参数
            // url: '',
        },
        mounted() {
            this.resImage=require('../../../assets/images/functions/ObjectExtraction_example.png')
        },
        methods:{
            changeImg(imgUrl){
                this.resImage=imgUrl
            },
            runDemo() {

            },
            showResult(){

            },
            handleRemove(file, fileList) {
                // console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            }
        }
    }
</script>

<style>
</style>